<template>
  <div class="newVs">
    <!-- <div class="mask"></div> -->
    <!-- 外层容器 -->
    <div class="new_vs">
      <!--  里面内容容器-->
      <div class="content_container">
        <!-- 头部表头容器 -->
        <div class="header_title">
          <span>参数设定</span>
          <!-- <i class="el-icon-close"></i> -->
        </div>
        <div class="foo_wrap">
          <!-- 输入框容器 -->
          <div class="input_container">
            <div>
              <span>店铺面积</span>
              <el-input v-model="shopAreaInputValue"></el-input>
            </div>
            <div>
              <span class="span_left">年目标</span>
              <el-input
                v-model.number="yearTargetInputValue"
                disabled
                type="number"
              ></el-input>
            </div>
            <div>
              <span class="span_left">月目标</span>
              <el-input
                v-model.number="monthTargetInputValue"
                disabled
                type="number"
              ></el-input>
            </div>
            <div>
              <span>提成比例</span>
              <el-input
                v-model="ti_cheng_bi_li_inputValue"
                type="number"
                @change="handle_ti_cheng_biLi_change"
              ></el-input>
            </div>
          </div>
          <!-- swith开关容器 -->
          <div class="switch_container">
            <div>
              <span>优惠抹零权限</span>
              <el-switch
                v-model="you_hui_mo_ling_switch"
                active-color="#017AFF"
                inactive-color="#DCE1EB"
              >
              </el-switch>
            </div>
            <div>
              <span>折扣变动权限</span>
              <el-switch
                v-model="discountChangeSwitch"
                active-color="#017AFF"
                inactive-color="#DCE1EB"
              >
              </el-switch>
            </div>
            <div style="margin-bottom: 0">
              <span>促销策略</span>
              <el-switch
                v-model="salesMethodSwitch"
                active-color="#017AFF"
                inactive-color="#DCE1EB"
              >
              </el-switch>
            </div>
            <div style="margin-bottom: 0" class="puhuo_time">
              <span style="margin-top: 5px">铺货起始时间</span>
              <el-date-picker
                v-model="dataPickSelectValue"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </div>
          <!-- 积分设定区域 -->
          <div class="ji_feng_setting_wrap">
            <p>积分设定</p>
            <p>消费1元累计1积分</p>
            <el-input
              v-model.number="ji_fen_inputValue"
              type="number"
            ></el-input>
            <span>积分兑换</span>
            <el-input v-model.number="moneyInputValue" type="number"></el-input>
            <span>元</span>
          </div>
          <!-- 底部按钮区域 -->
          <div class="btn_wrap">
            <el-button type="primary" @click="handleCoirmBtnClick"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 页面接口地址的引入
import {
  add_params_setting_api,
  query_params_setting_api
} from '../../../../../request/store/store_baseInfo_request.js'

export default {
  data() {
    return {
      // 店铺面积输入的值】
      shopAreaInputValue: '',
      // 年目标输入的值
      yearTargetInputValue: '',
      // 月目标输入的值
      monthTargetInputValue: '',
      // 提成比例输入的值
      ti_cheng_bi_li_inputValue: '',
      // 控制优惠抹零权限的swith状态
      you_hui_mo_ling_switch: true,
      // 控制折扣变动权限
      discountChangeSwitch: true,
      // 促销策略的switch
      salesMethodSwitch: true,
      // 积分输入框的值
      ji_fen_inputValue: '',
      // 金额输入的值
      moneyInputValue: '',
      // 进入页面获取设定参数对象
      queryDataObj: {},
      // 时间选择的值
      dataPickSelectValue: ''
    }
  },
  created() {
    // 获取设定参数对象
    this.query_params_setting()
  },
  methods: {
    // 提成比例只能在0-1之间
    handle_ti_cheng_biLi_change() {
      if (this.ti_cheng_bi_li_inputValue > 1) {
        this.$message.warning('提成比例只能在0-1之间,最大为1')
        this.ti_cheng_bi_li_inputValue = 1
        return
      }
      if (this.ti_cheng_bi_li_inputValue < 0) {
        this.$message.warning('提成比例只能在0-1之间,最小为0')
        this.ti_cheng_bi_li_inputValue = 0
        return
      }
    },

    //获取设定参数对象
    async query_params_setting() {
      // 获取设定参数对象接口
      const { data: res } = await query_params_setting_api()
      console.log(res, '在参数设定页面拿到的数据')
      // 保存拿到的参数对象
      if (res.code !== 200) return
      this.queryDataObj = res.data
      this.shopAreaInputValue = res.data.acreage
      this.yearTargetInputValue = res.data.yearTarget
      this.monthTargetInputValue = res.data.monthTarget
      this.ti_cheng_bi_li_inputValue = res.data.commission
      this.you_hui_mo_ling_switch = res.data.isPreferential === 1 ? true : false
      this.discountChangeSwitch = res.data.isDiscountUpdate === 1 ? true : false
      this.salesMethodSwitch = res.data.isPromotion === 1 ? true : false
      this.ji_fen_inputValue = res.data.exchangeIntegral
      this.moneyInputValue = res.data.exchangeMoney
      this.dataPickSelectValue = res.data.inputStartTime
      // 拿到数据渲染上去
    },
    // 点击确定的时候，触发的函数
    async handleCoirmBtnClick() {
      // console.log(this.$store.state.currentStoreData, 'vuex')
      // 并且后端要的参数
      console.log(this.queryDataObj, 'this.queryDataObj.')
      const paramsObj = {
        acreage: this.shopAreaInputValue, // 店铺面积
        commission: this.ti_cheng_bi_li_inputValue, // 业绩提成比例
        directSaleNo: this.queryDataObj.directSaleNo, // directSaleNo
        exchangeIntegral: this.ji_fen_inputValue, // 兑换积分
        exchangeMoney: this.moneyInputValue, // 兑换金额
        isDiscountUpdate: this.discountChangeSwitch ? 1 : 0, // 折扣变动权限（0否1是）
        isPreferential: this.you_hui_mo_ling_switch ? 1 : 0, // 优惠抹零权限（0否1是）
        isPromotion: this.salesMethodSwitch ? 1 : 0, // 开启促销（0否1是）
        monthTarget: this.monthTargetInputValue, // 月目标
        yearTarget: this.yearTargetInputValue, // 年目标
        status: this.queryDataObj.status, // 状态（0正常1禁用）
        id: this.queryDataObj.id, // id编号
        softwareCustomerId: this.queryDataObj.softwareCustomerId, // 软件客户ID
        inputStartTime: this.dataPickSelectValue
      }
      console.log(paramsObj, '新添加的post')
      const { data: res } = await add_params_setting_api(paramsObj)
      console.log(res, 'add_params_setting')
      if (res.code !== 200) return
      if (res.code === 200) this.$message.success('保存成功')
      // 保存成功之后，啥也不用操作，后端已经保存了，而且也是响应式的，巧！！！
      // this.shopAreaInputValue = ''
      // this.yearTargetInputValue = ''
      // this.monthTargetInputValue = ''
      // this.ti_cheng_bi_li_inputValue = ''
      // this.ji_fen_inputValue = ''
      // this.moneyInputValue = ''
    }
  }
}
</script>
// 遮罩层样式
<style lang="less" scoped>
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_vs {
  //   box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 800px;
  z-index: 99;
  overflow: auto;
}
.foo_wrap {
  padding: 0 24px 24px 24px;
}
//  头部标题样式
.header_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //   width: 264px;
  height: 48px;
  background-color: #f8f8f8;
  padding: 0 24px;

  span,
  i {
    font-size: 16px;
    font-weight: bold;
    color: #222222;
  }
}
// 输入框容器样式
.input_container {
  div {
    margin-bottom: 8px;
  }
  .span_left {
    margin-left: 14px;
  }
  span {
    margin-right: 8px;
  }
  margin-top: 16px;
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 160px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
// <!-- 积分设定区域 -->
.ji_feng_setting_wrap {
  // 输入框容器样式
  // input输入框的样式
  /deep/.el-input {
    // 宽度生效
    width: 80px;
    height: 32px;
    .el-input__inner {
      height: 32px;
    }
  }
}
.switch_container {
  div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 23px;
  }
}
// <!-- 积分设定区域 -->
.ji_feng_setting_wrap {
  p {
    margin: 0;
    &:nth-child(1) {
      font-weight: 800;
      color: #222222;
      font-size: 14px;
      margin-bottom: 11px;
    }
    &:nth-child(2) {
      font-size: 12px;
      font-weight: 400;
      color: #222222;
      margin-bottom: 11px;
    }
  }
  span {
    margin: 0 8px;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    line-height: 20px;
  }
}
.btn_wrap {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
// 时间选择器的样式
/deep/.el-date-editor {
  width: 150px;
  height: 32px;
  .el-input__inner {
    height: 32px;
  }
  .el-input__icon {
    line-height: 35px;
  }
}
</style>
